import React, { useState, useCallback, useEffect } from "react";
import { NextPage } from "next";
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Button,
  Tag,
  Popover,
  message,
  Popconfirm
} from "antd";

import { TagApi } from "@/api/tags";
import { AdminLayout } from "@/layout";

interface IProps {
  tags: ITag[];
}

const Tags: NextPage<IProps> = () => {
  const [tags, setTags] = useState([]);
  const [current, setCurrent] = useState<ITag>();
  const [label, setLabel] = useState("");
  const [value, setVlaue] = useState("");
  const getTags = useCallback(() => {
    TagApi.getAll().then(res => {
      setTags(res);
    });
  }, []);
  useEffect(() => {
    getTags();
  }, []);
  const resetTags = useCallback(() => {
    setCurrent(null);
    setLabel("");
    setVlaue("");
  }, []);
  const addTag = () => {
    TagApi.add({ label, value }).then(res => {
      getTags();
      resetTags();
      message.success("添加标签成功");
    });
  };
  const deleteTag = () => {
    TagApi.delete(current.id).then(res => {
      message.success("已删除");
      getTags();
      resetTags();
    });
  };
  const updateTag = () => {
    const { id } = current;
    TagApi.update(id, { label, value }).then(res => {
      message.success("更新成功");
    });
  };
  return (
    <AdminLayout>
      <div>
        <Row gutter={16}>
          <Col span={10}>
            <Card title="添加标签">
              <Form.Item>
                <Input
                  size="large"
                  placeholder="输入标签名"
                  onChange={e => setLabel(e.target.value)}
                  value={label}
                />
              </Form.Item>
              <Form.Item>
                <Input
                  size="large"
                  placeholder="输入英文标签值,前台路由用"
                  onChange={e => setVlaue(e.target.value)}
                  value={value}
                />
              </Form.Item>
              {!current ? (
                <Button size="large" type="primary" onClick={addTag}>
                  {"添加"}
                </Button>
              ) : (
                <React.Fragment>
                  <Button type="primary" onClick={updateTag}>
                    {"更新"}
                  </Button>
                  <Popconfirm
                    title="确认删除这个标签?"
                    okText="确认"
                    cancelText="取消"
                    onConfirm={deleteTag}
                  >
                    <Button type="danger" style={{ margin: "0 15px" }}>
                      删除
                    </Button>
                  </Popconfirm>
                  <Button
                    onClick={() => {
                      resetTags();
                    }}
                  >
                    {"返回添加"}
                  </Button>
                </React.Fragment>
              )}
            </Card>
          </Col>
          <Col span={14}>
            <Card title="所有标签">
              {tags.map(t => (
                <Tag
                  key={t.id}
                  onClick={() => {
                    setCurrent(t);
                    setLabel(t.label);
                    setVlaue(t.value);
                  }}
                >
                  {t.label}
                </Tag>
              ))}
            </Card>
          </Col>
        </Row>
      </div>
    </AdminLayout>
  );
};

export default Tags;
